<template>
  <view class="container">
	  <view class="task-header">
		  <button type="default" @click="navigateToForm()">我要申请</button>
	  </view>
    <view class="task-list">
      <view class="task-item" v-for="(task, index) in tasks" :key="index">
        <view class="task-header">
          <text class="task-title">{{task.gxrwRwmc}}</text>
        </view>
        <view class="task-details">
          <view class="info-item">
            <text class="label">原学社导师：</text>
            <text class="value">{{getTchLabel(task.tgsqYxsds)  }}</text>
          </view>
          <view class="info-item">
            <text class="label">学生：</text>
            <text class="value">{{ task.tgsqXsxm }}</text>
          </view>
          <view class="info-item">
            <text class="label">新学社导师导师：</text>
            <text class="value">{{ getTchLabel(task.tgsqXsds) }}</text>
          </view>
          <view class="info-item">
            <text class="label">申请时间：</text>
            <text class="value">{{ formatDateTime(task.createdate) }}</text>
          </view>
          <view class="info-item">
            <text class="label">申请结果：</text>
            <text class="value" :style="{ color: getStatusColor(task.status) }">{{ getlabel(task.tgsqSpjg) }}</text>
          </view>
		  <view class="info-item">
			<view class="view-button" @click="navigateToDetail(task)">
			<text>查看</text>
			</view>
		  </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import { listTgsq, getTgsq, delTgsq, addTgsq, updateTgsq } from "@/api/admin/tgsq";
	import store from "@/store";
	import { allocatedUserList } from "@/api/system/role";
export default {
	
  data() {
    return {
      tasks: [],
	  tchList:[]
    };
  },
  onLoad() {
	  this.getTasks();
		  this.getTch()
        },
  methods: {
	  navigateToDetail(task) {
	    uni.navigateTo({
	      url: `/pages/wdsq/details/details?id=${task.id}`
	    })
	  },
	  navigateToForm() {
	    uni.navigateTo({
	      url: `/pages/wdsq/form/form`
	    })
	  },
    formatDateTime(dateTimeString) {
      // 格式化日期时间字符串为可读格式
      const date = new Date(dateTimeString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    getStatusColor(status) {
      // 根据状态返回不同的颜色
      switch (status) {
        case '已过期未汇报':
          return 'red';
        case '进行中':
          return 'blue';
        case '已完成':
          return 'green';
        default:
          return 'black';
      }
    },
	getTasks(){
		const queryParams={
				  tgsqXsxh:store.getters.name,
		}
		listTgsq(queryParams).then(response=>{
			this.tasks=response.rows
		})
	},
	getlabel(value){
		 if(value==='0')
		return '通过'
		else if(value==='1')
		return '已驳回'
		else
		return '待审批'
	},//获取教师列表
		getTch(){
			const queryParams= {
				roleId: 101
			}
			allocatedUserList(queryParams).then(res => {
				this.tchList = res.rows;
			});
		},
		getTchLabel(userName) {
			// 创建一个映射函数，该函数将ID映射到标签  
			const map = this.tchList.reduce((acc, item) => {  
			acc[item.userName] = item.nickName;
			return acc;  
			}, {});  
			// 返回一个函数，该函数接受一个ID并返回相应的标签  
			return map[userName] || 'Unknown Label';  
		},
		/** 查询学社类别 */
    getxslb() {
      this.loading = true;
      listXslb(this.queryParams).then(response => {
        this.xslbList = response.rows;
      });
    },
    //获取学社信息
    getXsxxList(){
      listXsxx().then(response => {
        this.xsxxList = response.rows;
      });
    },
    //获取岗位信息
    getlistGwxx(){
      listGwxx().then(response => {
        this.listGwxx = response.rows;
      });
    }, 
    //查询部门/学院信息
    getDept(id){
      listDeptById(id).then(response => {
        this.deptList = response.data;
      });
    }, 
    getLabel(id) {  
      // 创建一个映射函数，该函数将ID映射到标签  
      const map = this.xslbList.reduce((acc, item) => {  
        acc[item.id] = item.xsglXslb;  
        return acc;  
      }, {});  
      // 返回一个函数，该函数接受一个ID并返回相应的标签  
      return map[id] || 'Unknown Label';  
    }  ,
    getgwxxLabel(id) {  
      // 创建一个映射函数，该函数将ID映射到标签  
      const map = this.listGwxx.reduce((acc, item) => {  
        acc[item.id] = item.gwxxGwmc;
        return acc;  
      }, {});  
      // 返回一个函数，该函数接受一个ID并返回相应的标签  
      return map[id] || 'Unknown Label';  
    }   ,
    getxsxxLabel(id) {  
      // 创建一个映射函数，该函数将ID映射到标签  
      const map = this.xsxxList.reduce((acc, item) => {  
        acc[item.id] = item.xsxxXsmc;
        return acc;  
      }, {});  
      // 返回一个函数，该函数接受一个ID并返回相应的标签  
      return map[id] || 'Unknown Label';  
    }  ,
    getdeptLabel(id) {  
      const map = this.deptList.reduce((acc, item) => {  
        acc[item.deptId] = item.deptName;
        return acc;  
      }, {});  
      return map[id] || 'Unknown Label';  
    } 
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.task-header {
  margin: 30rpx 0;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 24rpx;
}

.header-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 32rpx;
  background-color: #409eff;
  border-radius: 3rpx;
}

.task-header button {
  background-color: #409eff;
  color: #ffffff;
  font-size: 28rpx;
  padding: 16rpx 32rpx;
  border-radius: 44rpx;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.2);
}

.task-header button:active {
  transform: scale(0.96);
  background-color: #3a8ee6;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.task-item {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  animation: slideIn 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

.task-item::after {
  content: '';
  position: absolute;
  right: 20rpx;
  top: 50%;
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #dcdfe6;
  border-right: 4rpx solid #dcdfe6;
  transform: translateY(-50%) rotate(45deg);
}

.task-item:active {
  transform: scale(0.98);
  background-color: #fafafa;
}

.task-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 24rpx;
}

.task-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-item {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
  padding: 8rpx 0;
}

.label {
  font-size: 28rpx;
  color: #606266;
  width: 180rpx;
  flex-shrink: 0;
}

.value {
  flex: 1;
  font-size: 28rpx;
  color: #303133;
}

/* 状态标签样式 */
.status-tag {
  display: inline-block;
  padding: 6rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  font-weight: 500;
  margin-left: 16rpx;
}

.status-pending {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.status-approved {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-rejected {
  background-color: #fef0f0;
  color: #f56c6c;
}

.view-button {
  margin-top: 24rpx;
  padding: 16rpx 32rpx;
  background-color: #409eff;
  color: white;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.2);
}

.view-button:active {
  transform: scale(0.98);
  background-color: #3a8ee6;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 120rpx 0;
  color: #909399;
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-top: 24rpx;
}

.empty-state-icon {
  font-size: 96rpx;
  margin-bottom: 24rpx;
  color: #dcdfe6;
}

.empty-state-text {
  font-size: 28rpx;
  color: #909399;
  line-height: 1.6;
}
</style>